<template>
  <div class="singerlist">
    <div
      class="singer"
      v-for="(item, index) in singer"
      :key="index"
      :class="backColor(index)"
      @click="toSingerDetails(item.id)"
    >
      <div class="image">
        <img :src="item.img1v1Url" :title="item.name" :alt="item.name" />
      </div>
      <p>
        {{ item.name }}
        <span>{{ item.alias.length !== 0 ? `(${item.alias[0]})` : "" }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "singerlist",
  components: {},
  props: {
    singer: {
      type: [String, Array, Object]
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    backColor(index) {
      if (index % 2 !== 0) {
        return "backColor";
      }
    },
    toSingerDetails(id) {
      this.$router.push({
        name: "singerdetails",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.singerlist {
  margin-bottom: 30px;
}
.singer {
  height: 80px;
  line-height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px 0;
  &:hover {
    background: #f5f7fa;
  }
  .image {
    height: 100%;
    width: 80px;
    img {
      height: 100%;
      width: 100%;
      border-radius: 5px;
      cursor: pointer;
    }
  }
  p {
    margin: 0 20px;
    cursor: pointer;
    span {
      color: #ccc;
      font-size: 14px;
    }
  }
}
.backColor {
  background: #fafafa;
}
</style>
